<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<div id='app'>
  <p>ccc</p>
  <div @click.capture="cap('1')"  style="background-color:red; height: 100px; width: 100px;">
      <div @click.capture="cap('2')"  style="background-color: green; height: 50px; width: 100px;">
          <div @click.capture="cap('3')"  style="background-color: blue; height: 30px; width: 100px;color:#fff;line-height: 100px;text-align: center;">cap</div>
      </div>
  </div>
  <p>nnn</p>
  <div @click="cap('1')"  style="background-color:red; height: 100px; width: 100px;">
      <div @click="cap('2')"  style="background-color: green; height: 50px; width: 100px;">
          <div @click="cap('3')"  style="background-color: blue; height: 30px; width: 100px;color:#fff;line-height: 100px;text-align: center;">capture</div>
      </div>
  </div>
  <p>nnc</p>
  <div @click="cap('1')"  style="background-color:red; height: 100px; width: 100px;">
      <div @click="cap('2')"  style="background-color: green; height: 50px; width: 100px;">
          <div @click.capture="cap('3')"  style="background-color: blue; height: 30px; width: 100px;color:#fff;line-height: 100px;text-align: center;">capture</div>
      </div>
  </div>
  <p>ncn</p>
  <div @click="cap('1')"  style="background-color:red; height: 100px; width: 100px;">
      <div @click.capture="cap('2')"  style="background-color: green; height: 50px; width: 100px;">
          <div @click="cap('3')"  style="background-color: blue; height: 30px; width: 100px;color:#fff;line-height: 100px;text-align: center;">capture</div>
      </div>
  </div>
  <p>cnn</p>
  <div @click.capture="cap('1')"  style="background-color:red; height: 100px; width: 100px;">
      <div @click="cap('2')"  style="background-color: green; height: 50px; width: 100px;">
          <div @click="cap('3')"  style="background-color: blue; height: 30px; width: 100px;color:#fff;line-height: 100px;text-align: center;">capture</div>
      </div>
  </div>
  <p>ccn</p>
  <div @click.capture="cap('1')"  style="background-color:red; height: 100px; width: 100px;">
      <div @click.capture="cap('2')"  style="background-color: green; height: 50px; width: 100px;">
          <div @click="cap('3')"  style="background-color: blue; height: 30px; width: 100px;color:#fff;line-height: 100px;text-align: center;">capture</div>
      </div>
  </div>
  <p>ncc</p>
  <div @click="cap('1')"  style="background-color:red; height: 100px; width: 100px;">
      <div @click.capture="cap('2')"  style="background-color: green; height: 50px; width: 100px;">
          <div @click.capture="cap('3')"  style="background-color: blue; height: 30px; width: 100px;color:#fff;line-height: 100px;text-align: center;">capture</div>
      </div>
  </div>
</div>
<script>
   const app={
   data(){
   },
   methods:{
    cap(value){
        console.log(value)
    }
    }
  }
   Vue.createApp(app).mount('#app')
</script>
</body>
</html>
